<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-02 09:21:48
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-07 16:24:02
-->
<template lang="html">
  <div class="ticket-main" >
    <!-- 左侧菜单栏 -->
    <div class="ticket-menu">
      <span @click="handle(favorite)"  v-for="favorite in favorites" :key="favorite.id" :class="[activeId===favorite.favorites_id?'active':'','ticket-menu-item' ]" >
        {{favorite.favorites_title}}
      </span>
     <i class="el-icon-position up" @click="up"></i>
    </div>
    
    <!-- 内容部分 -->
    <div class="ticket-content" ref="content" v-loading="loading">
      <h2 class="category">{{getTitle}}</h2>
      <div class="ticket-product-item" @click="handleProduct(product)" v-for="(product,index) in products" :key="index">
        <el-image style="width:180px;height:180px;flex-shrink:1;" fit="cover" :src="product.pict_url+'_270x270xzq90.jpg_.webp'" />
        <div class="title">{{product.title}}</div>
        <div class="content">
            <el-button type="warning" v-if="product.coupon_info" @click.stop="handleCoupon(product)"  class="discovery-buy-btn">领券购买</el-button>
            <span class="origin" >{{product.coupon_info?'原价:59':'晚了，无优惠券'}}} </span>
        </div>
      </div>
    </div>
    <!-- 广告部分 -->
    <!-- <div class="ad">
      <el-carousel trigger="click" class="ad-box">
        <el-carousel-item v-for="item in 4"  :key="item">
          <el-image class="img" fit="cover" src="https://gw.alicdn.com/bao/uploaded/i3/2458110253/O1CN015VpFNb1DjuvdDyARU_!!0-item_pic.jpg_270x270xzq90.jpg_.webp" />
        </el-carousel-item>
    </el-carousel> 
    </div>-->
  </div>
</template>

<script>
import { getFavorites, getFavoritesList } from "@/api/ticket";

export default {
  name: "Index", //使用自定义指令
  data() {
    return {
      activeId: 0,
      products: [],
      loading: false,
      scroll: false,
      page: 1,
    };
  },
  computed: {
    getTitle() {
      if (!this.products.length) return "";
      let title = this.favorites.find(
        (v) => v.favorites_id == this.activeId
      ).favorites_title;
      return title.split("").join("/");
    },
  },
  methods: {
    async handle(item) {
      this.products = [];
      this.activeId = item.favorites_id;
      this.loading = true;
      let { data: products } = await getFavoritesList(this.activeId);
      this.loading = false;
      this.products =
        products.tbk_dg_optimus_material_response.result_list.map_data;
    },
    up() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },

    handleProduct(item) {
      window.open(item.click_url, "_blank");
    },
    handleCoupon(item) {
      window.open(item.coupon_click_url, "_blank");
    },
  },
  /**
   * seo信息
   */
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: "购物优惠券",
        },
        {
          hid: "keywords",
          name: "keywords",
          content: "优惠券,购物",
        },
        { name: "format-detection", content: "telephone=no" },
      ],
    };
  },
  /**
   * 加载数据
   */
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
  }) {
    let { data: favorites } = await getFavorites();
    let { data: products } = await getFavoritesList(favorites[0].favorites_id);
    return {
      favorites,
      activeId: favorites[0].favorites_id,
      products: products.tbk_dg_optimus_material_response.result_list.map_data,
    };
  },
};
</script>

<style lang="scss" scope>
.ticket-main {
  width: 1140px;
  min-height: 83vh;
  position: relative;
  // overflow-y: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  .ticket-menu {
    z-index: 999999;
    background-color: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    width: 1140px;
    box-shadow: 0 5px 10px #d4d4d4;
    display: flex;
    margin: 20px 0;
    flex-direction: row;
    align-items: center;
    .up {
      cursor: pointer;
      width: 105px;
      height: 58px;
      line-height: 58px;
      text-align: center;
    }
    .ticket-menu-item {
      height: 58px;
      line-height: 58px;
      margin: 0 20px;
      list-style: none;
      cursor: pointer;
      color: #8c8c8c;
      text-align: center;
      &:hover {
        color: #ff4500;
      }
    }
    .active {
      color: #ff4500;
      &:after {
        content: "";
        width: 100%;
        height: 3px;
        border-radius: 3px;
        display: block;
        margin: 0 auto;
        margin-top: -2px;
        background-color: #ff4500;
        border-radius: 30px;
      }
    }
  }
  .ticket-content::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }
  .ticket-content {
    width: 1140px;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    // overflow-y: auto;
    margin: 0 auto;
    margin-bottom: 10px;
    box-shadow: 0 5px 10px #d4d4d4;
    padding: 0 10px 10px 10px;
    .category {
      width: 100%;
      text-align: center;
    }
    .ticket-product-item {
      width: 265px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      background: #fff;
      box-shadow: 0 5px 10px #d4d4d4;
      margin-bottom: 15px;
      .title {
        cursor: pointer;
        margin-top: 10px;
        text-decoration: none;
        color: #47494e;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 16px;
        width: 100%;
        .discovery-buy-btn {
          text-decoration: none;
          border-radius: 5px;
          align-self: flex-end;
          background-color: #f56c6c;
          border-color: #f56c6c;
          color: #fff;
          padding: 8px 20px;
          margin-right: 10px;
        }
        .origin {
          font-weight: 600;
          color: #ebb563;
        }
      }
    }
  }

  .ad-box {
    box-shadow: 0 5px 10px #d4d4d4;
    width: 270px;
    margin-right: 5px;
  }
}
.el-carousel__container {
  height: 270px;
  width: 270px;
}
</style>
